<!--
 * @Description: 寒假校园精英PK赛统计列表
 * @Author: Li Yujie
 * @Date: 2021/01/21
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/01/21
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <el-tabs
                class="top-bar"
                v-model="activeName"
            >
                <el-tab-pane
                    label="校园精英排行榜"
                    name="elite-rank"
                >
                    <elite-rank
                        ref="eliteRank"
                    />
                </el-tab-pane>
                <el-tab-pane
                    label="学校排行榜"
                    name="school-rank"
                    lazy
                >
                    <school-rank
                        ref="schoolRank"
                    />
                </el-tab-pane>
            </el-tabs>
            <div class="btn">
                <el-button
                    type="primary"
                    size="medium"
                    @click="showSettingDialog"
                >
                    赛事设置
                </el-button>
            </div>
        </div>

        <el-dialog
            title="赛事设置"
            :visible.sync="settingDialog"
            width="740px"
            :close-on-click-modal="false"
            @close="mode = 'normal'"
        >
            <el-form
                ref="settingForm"
                label-width="100px"
            >
                <div
                    v-for="(item, index) in settings"
                    :key="item.series_no"
                    style="margin-bottom: 30px"
                >
                    <div style="margin-left: 50px;margin-bottom: 12px;">第{{ index + 1 }}期</div>
                    <el-form-item
                        label="本期名称"
                    >
                        <el-input
                            v-model="item.series_title"
                            size="medium"
                            clearable
                            style="width: 400px"
                            show-word-limit
                            maxlength="10"
                            v-if="item.editable"
                        />
                        <div v-else>{{ item.series_title }}</div>
                    </el-form-item>
                    <el-form-item
                        label="活动时间"
                    >
                        <div v-if="item.editable">
                            <el-date-picker
                                v-model="item.time_range"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="medium"
                                style="width: 400px"
                                value-format="timestamp"
                                @change="handleTimeChange($event, index)"
                            />
                            <el-button
                                type="primary"
                                size="small"
                                v-if="index === settings.length - 1 && mode === 'normal'"
                                style="margin-left: 12px"
                                @click="saveSetting(index)"
                            >
                                保存
                            </el-button>
                            <el-button
                                type="primary"
                                size="small"
                                v-if="index === settings.length - 1 && mode === 'edit'"
                                style="margin-left: 12px"
                                @click="addSetting"
                            >
                                继续添加
                            </el-button>
                        </div>
                        <div
                            v-else
                            style="display: flex;align-items: center"
                        >
                            <div>
                                {{ item.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} -
                                {{ item.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                            </div>
                            <el-button
                                type="primary"
                                size="small"
                                v-if="index === settings.length - 1"
                                style="margin-left: 12px"
                                @click="addSetting"
                            >
                                继续添加
                            </el-button>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="medium"
                    :style="{width: '120px', marginRight: '32px'}"
                    @click="settingDialog = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    v-if="mode === 'edit'"
                    @click="saveAllSetting"
                >
                    确认
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    v-if="mode === 'normal'"
                    @click="setEditMode"
                >
                    编辑
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import eliteRank from "./elite-rank";
import schoolRank from "./school-rank";

export default {
    name: "PkStatisticsList",
    data() {
        return {
            activeName: 'elite-rank',
            settingDialog: false,
            settings: [],
            // normal: 查看 edit： 编辑
            mode: 'normal'
        };
    },
    mixins: [back],
    components: {
        eliteRank,
        schoolRank
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '寒假校园PK赛'}, {title: '统计列表'}]);
        this.getSettingList();
    },
    methods: {
        /**
         * 显示赛事设置弹窗
         */
        showSettingDialog() {
            this.getSettingList();
            this.settingDialog = true;
        },
        /**
         * 获取排期列表
         */
        getSettingList() {
            this.$post('/student/pk%5Cget_series_list', {}, resp => {
                if (resp.code === 1) {
                    let data = [...resp.data.list];

                    data.forEach(item => {
                        item.editable = false;
                    });
                    this.settings = data;
                    if(this.settings.length === 0) {
                        this.settings.push({series_title: '', start_time: '', end_time: '', editable: true});
                    }
                    this.mode = 'normal';
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },
        /**
         * 添加
         */
        addSetting() {
            let item = {series_title: '', start_time: '', end_time: '', editable: true};

            this.settings.push(item);
        },
        /**
         * 保存设置
         */
        saveSetting(index) {

            if(!this.settings[index].series_title) {
                this.$message.warning('请填写本期名称');
                return;
            }
            if(!this.settings[index].start_time) {
                this.$message.warning('请选择时间');
                return;
            }
            let params = {
                start_time: this.settings[index].start_time,
                end_time: this.settings[index].end_time,
                series_title: this.settings[index].series_title,
            };

            this.$post('/student/pk%5Cadd_series', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.$refs.eliteRank.getSeriesList();
                    if(this.$refs.schoolRank) this.$refs.schoolRank.getSeriesList();
                    this.getSettingList();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * 选择时间处理
         * @param value
         * @param index
         */
        handleTimeChange(value, index) {
            this.settings[index].start_time = value ? value[0] / 1000 : '';
            this.settings[index].end_time = value ? value[1] / 1000 : '';
        },

        /**
         * 设置位编辑状态
         */
        setEditMode() {
            this.settings.forEach(item => {
                item.editable = true;
                this.$set(item, 'time_range', [item.start_time * 1000, item.end_time * 1000]);
            });

            this.mode = 'edit';
        },

        /**
         * 保存所有批次
         */
        saveAllSetting() {

            let series = [...this.settings];
            let series_json = JSON.stringify(series);

            this.$post('/student/pk%5Cupdate_series_batch', {series_json}, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.$refs.eliteRank.getSeriesList();
                    if(this.$refs.schoolRank) this.$refs.schoolRank.getSeriesList();
                    this.getSettingList();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });

        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;
    height: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;

        .btn {
            position: absolute;
            right: 12px;
            top: 8px;
        }

        /deep/ .el-tabs.top-bar {
            height: 100%;

            .el-tabs__nav-wrap {
                height: 54px;
                padding-left: 24px;

                .el-tabs__nav-scroll {
                    .el-tabs__nav {
                        height: 54px;
                        line-height: 54px;
                    }
                }
            }

            .el-tabs__content {
                height: calc(100% - 67px);

                .el-tab-pane {
                    height: 100%;
                    overflow-y: auto;
                }
            }
        }
    }

    /deep/ .el-dialog {
        margin-top: 15vh !important;

        .el-dialog__header {
            padding-top: 10px;
            box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;

            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }

            .el-icon-close:before {
                color: rgb(194, 194, 194);
                font-size: 17px;
                font-weight: bold;
            }

            .el-dialog__headerbtn {
                top: 14px;
            }
        }

        .el-dialog__body {
            padding: 24px 24px 0;
            max-height: 500px;
            overflow-y: auto;
        }

        .el-textarea__inner {
            resize: none;
        }

        .el-dialog__footer {
            text-align: center;
            padding-bottom: 30px;
            margin-top: 6px;
        }
    }
    /deep/ .el-form-item {
        margin-bottom: 0;
    }
}
</style>

